<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<!-- position: fixed; -->
		<view
			style="display: flex; align-items: center; width: 100%; box-sizing: border-box; top: 0; left: 0; padding-left: 30rpx; background-color: #fff; z-index: 99"
			:style="{ height: navheight + 'px', 'padding-top': hometop + 'px' }">
			<view>
				<text style="font-weight: 500; font-size: 32rpx; color: #151515">最新</text>
				<image src="../../static/dynamicimg/zhuangshi.png"
					style="width: 20rpx; height: 20rpx; vertical-align: middle" mode=""></image>
			</view>
		</view>
		<!-- 站位盒子 -->
		<view :style="{ height: navheight + 'px', width: '100%' }"></view>
		<!-- 约搭广场 -->
		<image src="../../static/dynamicimg/yueda.png" style="width: 690rpx; height: 160rpx" mode="aspectFill"
			@click="goground"></image>
		<!--站位盒子 -->

		<!-- 动态列表 -->
		<view class="itme" :key="item.id" v-for="(item, index) in list">
			<view class="" @click.stop="godetail(item.id)">
				<view class="header">
					<image @click.stop="gouserhome(item)" :src="img_url + item.avatar"
						style="width: 88rpx; height: 88rpx; border-radius: 50%" mode=""></image>
					<view style="padding-left: 16rpx">
						<view class="topright">
							<text
								style="font-weight: 500; font-size: 32rpx; color: #151515; padding-right: 12rpx">{{ item.nickname }}</text>
							<image style="width: 28rpx; height: 28rpx; vertical-align: middle"
								:src="item.gender == 1 ? '../../static/dynamicimg/boy.png' : '../../static/dynamicimg/gril.png'"
								mode=""></image>
						</view>
						<view style="font-weight: 400; font-size: 24rpx; color: #666666">
							{{ item.pushtime + ' · ' + item.address }}</view>
					</view>
				</view>
				<view style="
            font-weight: 500;
            font-size: 28rpx;
            color: #151515;
            width: 670rpx;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            margin-top: 24rpx;
          ">
					{{ item.content }}
				</view>
			</view>
			<!-- 图片视频 -->
			<view style="margin-top: 20rpx">
				<firstimg :list="item.images"></firstimg>
				<!-- <image :src="img_url + item2" style="width: 200rpx; height: 200rpx; margin-right: 16rpx; margin-bottom: 10rpx" mode="" v-for="item2 in item.images"></image>
        <video src="" style="width: 200rpx; height: 200rpx"></video> -->
			</view>
			<!-- 点赞、评论 -->
			<view style="display: flex; justify-content: flex-end">
				<view style="display: flex; align-items: center">
					<view @click.stop="changelike(item)">
						<image
							:src="item.is_like == 0 ? '../../static/dynamicimg/like.png' : '../../static/dynamicimg/likeact.png'"
							style="width: 28rpx; height: 28rpx; vertical-align: middle; margin-right: 14rpx" mode="">
						</image>
						<text>{{ item.like_num }}</text>
					</view>
					<view style="margin-left: 40rpx" @click.stop="godetail(item.id)">
						<image src="../../static/dynamicimg/pinglun.png"
							style="width: 28rpx; height: 28rpx; vertical-align: middle; margin-right: 14rpx" mode="">
						</image>
						<text>{{ item.comment_num }}</text>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 156rpx"></view>
		<!-- d底部组件 -->
		<TabBar @choosetab="choosetab" :tabbarindex="tabbarindex"></TabBar>
		<push v-if="showpush" @closeshowpush="closepush" @gopush="gopush"></push>
		<!-- 审核失败弹框 -->
		<uni-popup ref="popup" type="center">
			<view class="box">
				<view style="font-weight: 500; font-size: 32rpx; color: #333333; text-align: center">未审核原因</view>
				<view
					style="font-weight: bold; font-size: 32rpx; color: #333333; text-align: center; margin-top: 44rpx; margin-bottom: 62rpx">
					后台上传，后台上传后台上传后台上传，后台上传
				</view>
				<view
					style="font-weight: 500; font-size: 28rpx; color: #151515; height: 110rpx; text-align: center; line-height: 110rpx; border-top: 2rpx solid #e8e8e8"
					@click="$refs.popup.close()">
					我知道了
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import push from '@/components/pushact.vue';
	import TabBar from '@/components/tabbar.vue';
	export default {
		components: {
			TabBar,
			push
		},
		data() {
			return {
				list: [],
				img_url: this.img_url,
				tabbarindex: 2,
				showpush: false,
				hometop: '',
				navheight: '',
				gender: 1,
				islike: true,
				page: 1
			};
		},
		async onReachBottom() {
			console.log('触底了');
			this.page++;
			const res = await this.http('/dynamic/list', {
				page: this.page
			});
			console.log('动态列表', res);
			if (res.data.data.length != 0) {
				res.data.data.forEach((item) => {
					item.pushtime = this.timeAgo(item.createtime * 1000);
				});
				this.list.push(...res.data.data);
			} else {
				uni.showToast({
					title: '数据全部加载完毕',
					icon: 'none'
				});
			}
			// this.list = res.data.data;
			// this.list.forEach((item) => {
			//   item.pushtime = this.timeAgo(item.createtime * 1000);
			// });
		},
		onLoad() {
			// this.$refs.popup.open();
			const app = getApp();
			this.hometop = app.globalData.capsule.top; // 胶囊到顶部的距离
			this.navheight = (app.globalData.capsule.top - app.globalData.system.statusBarHeight) * 2 + app.globalData
				.capsule.height + app.globalData.system.statusBarHeight; // 头部盒子的高度
		},
		onShow() {
			this.page = 1;
			// if (uni.getStorageSync('token')) {
			//   this.getdylist();
			// }
			this.getdylist();
		},
		methods: {
			// 几秒前
			timeAgo(timestamp) {
				const current = Date.now();
				const previous = new Date(timestamp);

				const seconds = Math.floor((current - previous) / 1000);
				let interval = Math.floor(seconds / 31536000);

				if (interval >= 1) {
					return interval + ' 年前';
				}
				interval = Math.floor(seconds / 2592000);
				if (interval >= 1) {
					return interval + ' 个月前';
				}
				interval = Math.floor(seconds / 86400);
				if (interval >= 1) {
					return interval + ' 天前';
				}
				interval = Math.floor(seconds / 3600);
				if (interval >= 1) {
					return interval + ' 小时前';
				}
				interval = Math.floor(seconds / 60);
				if (interval >= 1) {
					return interval + ' 分钟前';
				}
				return Math.floor(seconds) + ' 秒前';
			},
			// 点赞
			changelike(item) {
				item.is_like = !item.is_like;
				if (item.is_like) {
					item.like_num++;
				} else {
					item.like_num--;
				}
				this.http('/dynamic/operate', {
					dynamic_id: item.id
				});
			},
			// 获取动态列表
			async getdylist() {
				const res = await this.http('/dynamic/list', {
					page: this.page
				});
				console.log('动态列表', res);
				this.list = res.data.data;
				this.list.forEach((item) => {
					item.pushtime = this.timeAgo(item.createtime * 1000);
				});
			},
			//发布动态
			gopush(index) {
				if (index == 1) {
					this.showpush = false;
					// 发布活动
					uni.navigateTo({
						url: '/pages/pushactive/pushactive'
					});
				}
				if (index == 2) {
					this.showpush = false;
					// 发布动态
					uni.navigateTo({
						url: '/pages/pushdynamic/pushdynamic'
					});
				}
			},
			closepush(status) {
				this.showpush = status;
			},
			// 跳转到用户资料
			gouserhome(item) {
				uni.navigateTo({
					url: '/dynamic/userhome/userhome?userid=' + item.user_id
				});
			},
			// 跳转到动态详情
			godetail(id) {
				uni.navigateTo({
					url: '/dynamic/dynamicdetail/dynamicdetail?id=' + id
				});
			},
			// 跳转到广场
			goground() {
				console.log(1111);
				uni.navigateTo({
					url: '/dynamic/yuedaground/yuedaground'
				});
			},
			// 切换tab
			choosetab(index) {
				if (index != 5) {
					this.tabbarindex = index;
				}
				console.log(index);
				if (index == 1) {
					uni.redirectTo({
						url: '/pages/index/index'
					});
				}
				if (index == 2) {
					uni.redirectTo({
						url: '/dynamic/index/index'
					});
				}
				if (index == 3) {
					uni.redirectTo({
						url: '/message/index/index'
					});
				}
				if (index == 4) {
					uni.redirectTo({
						url: '/my/index/index'
					});
				}
				if (index == 5) {
					this.showpush = true;
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 20px;
		font-size: 14px;
		line-height: 24px;

		.itme {
			width: 690rpx;
			border-bottom: 2rpx solid #e8e8e8;
			padding-bottom: 34rpx;
			margin-bottom: 32rpx;

			.header {
				display: flex;

				.topright {}
			}
		}

		.box {
			box-sizing: border-box;
			width: 570rpx;
			height: 400rpx;
			background: #ffffff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding-top: 32rpx;
		}
	}
</style>